<template>
	<view class="note">
		<view class="note-top">
			<view class="note-section">
				<view class="note-item" v-for="(item, index) in groupMemberList">
					<u-avatar @click="go2User(item.UserId)" :style="avatarStyle"
						:show-level="item.IsLord == 1 ? true : false"
						v-if="item.UserAvatar && item.UserAvatar != 'https://idock-1305057061.cos.ap-beijing.myqcloud.com/avatar/2022-06-28/avatar.png'"
						:src="item.UserAvatar" mode="square"></u-avatar>
					<u-avatar @click="go2User(item.UserId)" v-else :style="avatarStyle" mode="square"
						src="/static/images/avatar.jpg"></u-avatar>
					<view class="note-item_name">{{item.UserName}}</view>
				</view>
				<view class="note-item"
					@click="$goPage('/note/group/create',{title: addFriendTitle, type: 1, pid: pid, gid: groupInfo.Gid, groupMemberList: JSON.stringify(groupMemberList).replace(/&/g,'%26')})">
					<u-image class="note-item_avatar" width="72rpx" height="72rpx" src="/static/images/add-friend.png">
					</u-image>
					<view class="note-item_name">{{$t('chat.btn_add')}}</view>
				</view>
				<view v-if="groupInfo.GroupLord == $store.state.vuex_user.uid" class="note-item"
					@click="$goPage('/note/group/create',{title:$t('chat.btn_del_friend'), type: 2, gid: groupInfo.Gid})">
					<image class="note-item_avatar" src="/static/images/del-friend.png"></image>
					<view class="note-item_name">{{$t('chat.btn_del')}}</view>
				</view>
			</view>
			<view class="checkmore u-m-t-50" @click="$goPage('/note/group/member-detail',{groupId: groupId})">
				{{ $t('chat.check_all_member') }}({{ groupMemberList.length }})<u-icon name="arrow-right" color="#8f8f8f">
				</u-icon>
			</view>
		</view>
		<view class="info">
			<!-- 修改群头像 -->
			<u-cell-item class="info-cell_item avatar" :title-style="titleStyle" bg-color="#ffffff"
				:title="$t('chat.chat_group_head')" :arrow="false">
				<view class="info-cell_item--avatar">
					<u-image v-if="groupInfo.GroupAvatarImg != ''" width="112rpx" height="112rpx" border-radius="20rpx"
						:src="groupInfo.GroupAvatarImg"></u-image>
					<u-image v-else width="112rpx" height="112rpx" border-radius="20rpx"
						src="/static/static/assets/gruopavatar.svg"></u-image>
					<u-avatar-upload v-if="uid == groupInfo.GroupLord" width="112" height="112" :upload-text="''"
						:action="action" :file-list="fileList" :formData="formData" @on-success="uploadSuccessCallback"
						@on-remove="removeImgCallback" max-count="1"></u-avatar-upload>		
				</view>
			</u-cell-item>
			
			<!-- 修改群聊名称 -->
			<u-cell-item class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff"
				:title="$t('chat.chat_group_name')" :arrow="false">
				<view class="info-cell_item--input u-flex" >
					<u-input v-model="groupInfo.GroupName" :placeholder="$t('chat.placeholder_unfilled')" type="text"
						:border="false" :clearable="false" :disabled="uid != groupInfo.GroupLord" input-align="right" />
				<view v-if="uid===groupInfo.GroupLord">
					<u-icon name="checkbox-mark" size="36" class="u-m-l-64" color="#135FFF" @click="updateGroupName">
					</u-icon>
				</view>
				</view>
			</u-cell-item>
			
			<!-- 修改群公告 -->
			<u-cell-item :label-style="labelStyle" :title-style="titleStyle" bg-color="#ffffff"
				:title="$t('chat.chat_group_notice')" :arrow="false">
				<view slot="label">
					<view style="display: flex;justify-content: space-between">
						<view style="width:100rpx;height:60rpx"></view>
						<u-input v-model="groupInfo.GroupNotify" :placeholder="$t('chat.placeholder_unfilled')" type="textarea"
							:border="false" :clearable="false" input-align="right" :disabled="uid != groupInfo.GroupLord" :custom-style="{'width': '100rpx'}" />
						<view v-if="uid===groupInfo.GroupLord" style="text-align: right;">
							<u-icon name="checkbox-mark" size="40" color="#135FFF" @click="updateGroupName"></u-icon>
						</view>
					</view>
					
				</view>
			</u-cell-item>
					
			<u-cell-item v-if="groupInfo.GroupLord == $store.state.vuex_user.uid" class="info-cell_item" :title-style="titleStyle"
				bg-color="#ffffff" :title="$t('chat.chat_group_mgr')" :value="$t('chat.chat_group_trans')"
				@click="$goPage('/note/group/transfer', {gid: groupId})">
			</u-cell-item>
			<u-cell-item class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff" :title="$t('chat.chat_search_message')"
				@click="$goPage('/TUIKit/TUIPages/TUISearch', {conversation_id: 'GROUP' + groupId, group_id: groupId})">
			</u-cell-item>
			<u-cell-item class="info-cell_item" :title-style="titleStyle" bg-color="#ffffff" :title="$t('chat.chat_report')"
				@click="$goPage('/user/complaints')">
			</u-cell-item>
		</view>
		<view class="note-footer">
			<view class="dismiss-button" v-if="groupInfo.GroupLord == $store.state.vuex_user.uid" @click="disbandVisable = true">
				{{$t('chat.chat_group_dismiss')}}
			</view>
			<view class="exit-button" v-else @click="quitVisible = true">{{$t('chat.chat_group_exit')}}</view>
		</view>
		<u-modal v-model="quitVisible" :show-cancel-button="true" :show-title="false" :cancelText="$t('chat.btn_cancel')"
			:confirmText="$t('chat.btn_confirm')" :content="$t('chat.group_quit_notify')" @confirm="actQuit"></u-modal>
		<u-modal v-model="disbandVisable" :show-cancel-button="true" :show-title="false" :cancelText="$t('chat.btn_cancel')"
			:confirmText="$t('chat.btn_confirm')" :content="$t('chat.group_disband_notify')" @confirm="actDisband"></u-modal>
	</view>
</template>

<script>
	import {
		TIM,
		TIMUploadPlugin,
		Aegis
	} from '@/pages/TUIKit/debug/tim.js';
	import pageMixin from '@/utils/pageMixin';
	export default {
		mixins: [pageMixin],
		data() {
			return {
				vuex_user:{},
				pid: 0,
				uid: '',
				addFriendTitle: '',
				groupId: '',
				groupName: '',
				groupInfo: {},
				groupMemberList: [],
				status: 'nomore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '到底了哦'
				},
				quitVisible: false,
				disbandVisable: false,
				titleStyle: {
					color: '#131313',
					fontSize: '32rpx',
				},
				textareaStyle: {
					marginBottom: '170rpx',
					color: '#131313',
					fontSize: '32rpx',
					width: '100%',
				},
				labelStyle: {
					width: '100%',
				},
				avatarStyle: {
					marginTop: '40rpx',
				},
				action: '',
				formData: {},
				fileList: [],

				oldGroupNotify: '',
			}
		},
		onLoad(option) {
			let groupId = option.groupId || '';
			let groupName = option.groupName || '';
			if (groupId != '') {
				groupId = groupId.replace(/GROUP/, '');
			}
			this.groupId = groupId;
			this.pid = option.pid || 0;
			if (this.pid > 0) {
				console.log("this.$t('chat.btn_add_project_person')", this.$t('chat.btn_add_project_person'))
				this.addFriendTitle = this.$t('chat.btn_add_project_person');
			} else {
				console.log("this.$t('chat.btn_add_friend')", this.$t('chat.btn_add_friend'))
				this.addFriendTitle = this.$t('chat.btn_add_friend');
			}
			this.init();
		},
		onShow() {
			this.init();
		},
		mounted: function() {
			this.vuex_user = this.$store.state.vuex_user
		},
		components: {},
		computed: {
			i18n() {
				return this.$t('chat')
			}
		},
		methods: {
			init() {
				this.uid = this.$store.state.vuex_user.uid;
				this.action = this.fileUploadUrl;
				this.formData = {
					catalog: 'avatar'
				};
				this.getGroupMemberList();
			},
			connectGoEasy() {
				uni.showLoading();
				this.goEasy.connect({
					id: this.vuex_user.uid,
					data: {
						name: this.vuex_user.uname,
						avatar: this.vuex_user.avatar
					},
					onSuccess: () => {
						console.log('GoEasy connect successfully.')
					},
					onFailed: (error) => {
						console.log('Failed to connect GoEasy, code:' + error.code + ',error:' + error
							.content);
					},
					onProgress: (attempts) => {
						console.log('GoEasy is connecting', attempts);
					}
				});

				//订阅Goeasy消息
				this.goEasy.pubsub.subscribe({
					channel: "user" + this.vuex_user.uid,
					onMessage: function(message) {
						console.log("Channel:" + message.channel + " content:" +
							message.content);
					},
					onSuccess: function() {
						console.log("Channel订阅成功。");
					},
					onFailed: function(error) {
						console.log("Channel订阅失败, 错误编码：" + error.code + " 错误信息：" +
							error.content)
					}
				});
			},
			getGroupMemberList() {
				let that = this;
				that.$http.get('/mgr/user/group/member/list/data', {
					gid: that.groupId
				}).then(res => {
					that.groupInfo = res.groupInfo;
					that.groupName = res.groupInfo.GroupName;
					that.oldGroupNotify = res.groupInfo.GroupNotify;
					that.groupMemberList = res.groupMemberList;
					console.log(that.groupMemberList)
					if (res.groupInfo.GroupAvatarImg != '') {
						that.fileList.push({
							url: res.groupInfo.GroupAvatarImg
						});
					}
					uni.setNavigationBarTitle({
						title: this.$t('chat.chat_group_info') + '(' + this.groupMemberList.length + ')'
					})
				});
			},
			actQuit() {
				let that = this;
				console.log("+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++")
				that.quitVisible = false;
				let data = {
					gid: that.groupId,
					uid: that.vuex_user.uid
				};
				that.$http.post('/mgr/user/group/member/quit', data).then(res => {
					// that.goEasy.im.removeGroupConversation({
					// 	groupId: that.groupId,
					// 	onSuccess: function() {
					// 		console.log("Remove group conversation successfully.");
					// 	},
					// 	onFailed: function(error) {
					// 		console.log("Failed to remove group conversation, code:" + error.code +
					// 			" content:" + error.content);
					// 	}
					// });
					if(res == "success"){
						uni.showToast({
							title: that.$t('chat.group_quit_success_notify')
						});
						setTimeout(function() {
							that.$u.route({
								type: 'back',
								delta: 2
							});
						}, 1000);
					}else{
						uni.showToast({
							title: that.$t('chat.group_quit_defeat_notify')
						});
					}

				});
			},
			actDisband() {
				let that = this;
				that.disbandVisible = false;
				that.$http.post('/mgr/user/group/disband', {
					gid: that.groupId
				}).then(res => {
					that.goEasy.im.removeGroupConversation({
						groupId: that.groupId,
						onSuccess: function() {
							console.log("Remove group conversation successfully.");
						},
						onFailed: function(error) {
							console.log("Failed to remove group conversation, code:" + error.code +
								" content:" + error.content);
						}
					});
					uni.showToast({
						title: that.$t('chat.group_disband_success_notify')
					});
					setTimeout(function() {
						that.$u.route({
							type: 'back',
							delta: 2
						});
					}, 1000);
				});
			},
			updateGroupName() {
				let that = this;
				let param = {
					gid: this.groupInfo.Gid,
					group_name: this.groupInfo.GroupName,
					group_avatar: this.groupInfo.GroupAvatar,
					group_notify: this.groupInfo.GroupNotify,
				};
				this.$http.post('/mgr/user/group/save', param).then(res => {
					uni.showToast({
					    title: that.$t('chat.group_update_success_notify'),
					});

				});
			},
			uploadSuccessCallback(data) {
				let that = this;
				if (data.data.filepath && data.data.filepath != '') {
					let param = {
						gid: this.groupInfo.Gid,
						group_name: this.groupInfo.GroupName,
						group_avatar: data.data.filepath,
					};
					this.$http.post('/mgr/user/group/save', param).then(res => {
						console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>")

						// this.sendMessage(textMessage);
						// uni.showToast({
						// 	title: that.$t('chat.group_upload_success_notify'),
						// });
						// this.init();
					});
				}
			},
			removeImgCallback() {
				let param = {
					gid: this.groupInfo.Gid,
					group_name: this.groupInfo.GroupName,
					group_avatar: '',
				};
				this.$http.post('/mgr/user/group/save', param).then(res => {
					let textMessage = this.goEasy.im.createTextMessage({
						text: '【删除群头像】',
						to: {
							id: this.groupInfo.Gid,
							type: this.GoEasy.IM_SCENE.GROUP,
							data: {
								name: this.groupInfo.GroupName,
								avatar: '/static/static/assets/gruopavatar.svg'
							}
						},
						notification: {
							title: this.vuex_user.uname + '发来一段文字',
							body: '【删除群头像】' // 字段最长 50 字符
						}
					});
					this.sendMessage(textMessage);
					this.init();
				});
			},
			sendMessage(message) {
				this.goEasy.im.sendMessage({
					message: message,
					onSuccess: function(message) {
						console.log('发送成功.', message);
					},
					onFailed: function(error) {
						if (error.code === 507) {
							console.log(
								'发送语音/图片/视频/文件失败，没有配置OSS存储，详情参考：https://www.goeasy.io/cn/docs/goeasy-2.x/im/message/media/send-media-message.html'
							);
						} else {
							console.log('发送失败:', error);
						}
					}
				});
			},
			go2User(uid) {
				uni.navigateTo({
					url: '/pages/user/index?uid=' + uid + '&groupId=' + this.groupId
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.note {
		padding-bottom: 88rpx;
	}

	.checkmore {
		text-align: center;
		color: #8f8f8f;
	}

	.note-top {
		background-color: #fff;
		padding: 10rpx 0 30rpx;
		margin-bottom: 24rpx;
	}

	.note-section {
		clear: both;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.note-item {
		float: left;
		box-sizing: border-box;
		padding: 0 10rpx;
		width: 20%;
		text-align: center;

		&_avatar {
			position: relative;
			margin: 50rpx auto 10rpx;
			width: 72rpx;
			height: 72rpx;
		}

		&_name {
			font-size: 32rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}

	.note-footer {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;

		.dismiss-button,
		.exit-button {
			padding: 24rpx 0;
			width: 100%;
			color: #E67174;
			text-align: center;
			font-size: 32rpx;
		}

	}

	.slot-content {
		padding: 30rpx 30rpx 0;
	}

	.info-cell_item_textarea {
		height: 150rpx;
		background-color: #ffffff;

		&.avatar {
			height: 132rpx;
		}

		&--text {
			color: #131313;
		}

		&--avatar {
			position: relative;
			width: 122rpx;
			height: 122rpx;
			margin-left: auto;
			padding: 10rpx;

			.u-upload {
				z-index: 999;
				position: absolute;
				top: 0;
				left: 0;
			}

			.u-list-item {
				margin: 0 ;
				opacity: 0;
			}
		}

		&--input {
			position: relative;
			width: 90%;
			margin-left: auto;
		}
	}

	.info-cell_item {
		height: 100rpx;
		background-color: #ffffff;

		&.avatar {
			height: 132rpx;
		}

		&--text {
			color: #131313;
		}

		&--avatar {
			position: relative;
			width: 122rpx;
			height: 122rpx;
			margin-left: auto;
			padding: 10rpx;

			.u-upload {
				z-index: 999;
				position: absolute;
				top: 0;
				left: 0;
			}

			.u-list-item {
				margin: 0 ;
				opacity: 0;
			}
		}

		&--input {
			position: relative;
			width: 60%;
			margin-left: auto;
		}
	}
</style>
